<template>
    <div>
        <div class="head">
            <textarea maxlength="-1" v-model="artTitle" placeholder="请输入文章标题" placeholder-class="placeholder"></textarea>
            <div>
                <pub-upload-img v-model="artMainImg" width="200rpx" height="150rpx" upDes="封面图"></pub-upload-img>
            </div>
        </div>
        <div class="content_container" v-if="contentList.length">
            <div class="wfull mar-tb10 flex-h-center"> <addContent @active="addContentType($event, 'prev')"></addContent> </div>
            <div class="content" >
                <template v-for="(item, index) in contentList">
                    <p v-if="item.type == 'txt' && item.editType == 'show'" :key="index">
                        {{item.content}}
                        <span @click="editTxt(item, index)" class="edit_item"><i class="icon-delete3"></i>编辑</span>
                        <span @click="deleteItem(item, index)" class="delete_item"><i class="icon-delete3"></i>删除</span>
                    </p>
                    <div v-if="item.type == 'img' && item.editType == 'show'" :key="index" class="img">
                        <image :src="item.content" mode="widthFix" ></image>
                        <span @click="deleteItem(item, index)" class="delete_item"><i class="icon-delete3"></i>删除</span>
                    </div>
                    <div v-if="item.type == 'video' && item.editType == 'show'" :key="index" class="video">
                        <video :src="item.content" mode="" ></video>
                        <span @click="deleteItem(item, index)" class="delete_item"><i class="icon-delete3"></i>删除</span>
                    </div>
                </template>
            </div>
            <div class="wfull mar-tb10 flex-h-center"> <addContent @active="addContentType($event, 'next')"></addContent> </div>
        </div>
        <div v-else class="empty_add flex-column flex-center">
            <addContent @active="addContentType"></addContent>
            <p class="mar-t30 fs32 fw-bold">点此添加文章内容</p>
            <span class="mar-t20 fs28 color-666">可加文字/图片/视频</span>
        </div>
        <div class="bottom">
            <span @click="cancelDelete">撤销删除</span>
            <span @click="saveDraft">存到草稿箱</span>
            <p @click="submit">发布</p>
        </div>
        <pub-text-editer ref="textEditer"></pub-text-editer>
    </div>
</template>

<script>
import addContent from '@/components/pages/addContent'
import { createDynamic, editDynamicDraft, getDynamicDraft } from '@/request/art'
export default {
    components: {
        addContent
    },
    data() {
        return {
            draftId: '',
            artMainImg: '',
            artTitle: '',
            delIndexList: [], //删除记录，撤销删除用
            contentList: [
                // { type: 'txt', content: '文章内容' },
                // { type: 'img', content: 'https://xxxx.com/xxx.jpg' },
                // { type: 'video', content: 'https://xxxx.com/xxx.mp4' },
            ]
        }
    },
    onLoad({ draftId }) {
        if(draftId) {
            this.draftId = draftId ;
            this.getDraftDetail()
        }
    },
    methods: {
        getDraftDetail() {
            getDynamicDraft().then(res => {
                let detail = res.data.list[0] || {}
                this.artMainImg = detail.picUrl || ''
                this.artTitle = detail.title || ''
                try {
                    this.contentList = JSON.parse(detail.draftData) || []
                } catch(err) {
                    this.contentList = []
                }
            })
        },
        addContentType(e, type) {
            e.editType = 'show'
            if(type == 'prev') {
                this.contentList.unshift(e)
            } else {
                this.contentList.push(e)
            } 
        },
        editTxt(item) {
            this.$refs.textEditer.open({
                content: item.content,
            }).then(rst => {
                item.content = rst
            })
        },
        // 删除文章，假删除，改状态，并且把删除顺序记下来，撤销删除用的
        deleteItem(item, index) {
            item.editType = 'del_' + this.delIndexList.length
            this.delIndexList.push(item.editType)
        },
        cancelDelete() {
            if(this.delIndexList.length == 0) return this.$interact.toast('沒有可撤销删除')
            let key = this.delIndexList[this.delIndexList.length - 1]
            this.contentList.forEach(item => {
                if(item.editType == key) {
                    item.editType = 'show'
                }
            })
            this.delIndexList = this.delIndexList.slice(0, -1)
        },
        formatHtml() {
            let useAbleContent = this.contentList.filter(item => item.editType == 'show')
            let htmlStr = ''
            useAbleContent.forEach(item => {
                if(item.type == 'txt') {
                    htmlStr += `<p>${item.content}</p>`
                } else if(item.type == 'img') {
                    htmlStr += `<div class="img"><img style="width:100%" src="${item.content}" /></p>`
                } else if(item.type == 'video') {
                    htmlStr += `<div class="img"><video style="width:100%" src="${item.content}"></video></p>`
                }
            })
            htmlStr = `<article>${htmlStr}</article>`
            console.log(htmlStr);
            return htmlStr
        },
        saveDraft() {
            this.$interact.modal({
                title: '提示',
                content: '是否保存到草稿箱并退出？',
                showCancel: true,
            }).then(action => {
                if(action.confirm) {
                    editDynamicDraft({
                        id: this.draftId || void 0,
                        draftData: JSON.stringify(this.contentList),
                        picUrl: this.artMainImg,
                        title: this.artTitle,
                    }).then(res => {
                        this.$navigate.back()
                    })
                }
            })
        },
        submit() {
            if(!this.artMainImg) return this.$interact.toast('请上传封面图')
            if(!this.artTitle) return this.$interact.toast('请输入文章标题')
            let context = this.formatHtml()
            if(context == '<article></article>') return this.$interact.toast('请添加文章内容')

            this.$interact.modal({
                title: '提示',
                content: '确定发布？',
                showCancel: true,
            }).then(action => {
                if(action.confirm) {
                    createDynamic({
                        headImg: this.artMainImg,
                        title: this.artTitle,
                        context,
                        dynamicType: '00',
                    }).then(async res => {
                        if(this.draftId) {
                            await editDynamicDraft({id: this.draftId, delStatus: '01'})
                        }
                        // this.$navigate.to('/pages/')
                        this.$navigate.back()
                    })
                }
            })

        }
    }

}
</script>

<style lang="less" scoped>
.head {
    width: 100%;
    height: 240rpx;
    background: #fff;
    padding: 30rpx;
    display: flex;
    align-items: center;
    textarea{
        flex: 1;
        height: 150rpx;
        font-size: 36rpx;
        font-weight: bold;
        padding: 10rpx;
    }
    .placeholder{
        font-weight: 600;
    }
    // .upload{
    //     width: 200rpx;
    //     height: 150rpx;
    //     background: #ddd;
    //     border-radius: 10rpx;
    // }
}
.empty_add{
    width: 680rpx;
    margin: 30rpx auto;
    height: 400rpx;
    background: #fff;
    border: 1px dashed #ddd;
}
.bottom{
    width: 100%;
    height: 100rpx;
    background: #fff;
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 100;
    >*{
        flex: 1;
        font-size: 34rpx;
        font-weight: bold;
        position: relative;
        .align(center);
    }
    span:first-child::after{
        content: "";
        width: 1px;
        height: 40rpx;
        position: absolute;
        top: 30rpx;
        right: 0;        
        background: #ddd;
    }
    p{
        height: 100%;
        background: @mainColor;
        color: #fff;
    }
}

.content_container{
    margin-top: 30rpx;
    padding-bottom: 300rpx;
    .content{
        background: #fff;
        padding: 30rpx;
        p, div{
            position: relative;
            padding: 20rpx 0 40rpx;
            word-wrap: break-word;
            .delete_item, .edit_item{
                position: absolute;
                bottom: 5rpx;
                right: 0;
                display: flex;
                align-items: center;
                font-size: 26rpx;
                line-height: 30rpx;
                color: @mainColor;
            }
            .edit_item {
                right: 100rpx;
                color: #0255c3;
            }
            video{
                width: 100%;
                height: 400rpx;
            }
            image{
                width: 100%;
            }
        }
    }
}


</style>